<template>
	<view>
		<view>
			<fui-sticky top="50" @sticky="sticky">
				<view class="containers" style="background-color: #fff;">
					<view style="display: flex;justify-content: flex-start;align-items: center;height: 50px;">
						<block v-for="(item, index) in categories" :key="index" v-if="index < 10">
							<view :class="{'active': categoryIndex== item.id}" class="name fl"
								@click="setCategory(item)">
								{{item.name}}
							</view>
						</block>
					</view>
					<view v-if="is_show_user"
						style="display: flex;justify-content: flex-start;align-items: center;height: 90px;width: 100%;">
						<block v-for="(item, index) in user" :key="index" v-if="index < 10">
							<view style="width: 80px;">
								<view>
									<image :src="item.avator" class="imgbg"
										style="width: 60px;height:60px ;border-radius: 50%;">
									</image>
								</view>
								<view
									style="display: flex;justify-content:center;align-items: center;margin-top: 5px;font-size: 8px;">
									<view style="color: #666666;" @click="setCategory(item)">
										{{item.name}}
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
				<view class="container">

					<view style="display: flex;justify-content: center;align-items: center;">
						<view :style="tabIndex==1?'color:#0033FF':''" @click="clickOption(1)">推荐</view>
						<view style="margin-left: 15px;" :style="tabIndex==2?'color:#0033FF':''"
							@click="clickOption(2)">最新</view>
						<view style="margin-left: 15px;" :style="tabIndex==3?'color:#0033FF':''"
							@click="clickOption(3)">点赞</view>
						<view style="margin-left: 15px;" :style="tabIndex==4?'color:#0033FF':''"
							@click="clickOption(4)">评论</view>
					</view>
					<view style="width: 400px;">
						<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入关键词" clearButton="none"
							cancelButton="none" @confirm="search" />
					</view>
				</view>
			</fui-sticky>
			<view class="container">
				<liu-waterfall v-if="promos.length > 0" :dataList="promos" :column="columns"
					@click="clickItem"></liu-waterfall>
			</view>
		</view>
	</view>
</template>

<script>
	import heroSubConfig from '@/common/config/home/hero-sub.config.js';

	export default {
		props: {
			scrollTop: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				channels: heroSubConfig.channels,
				promos: [],
				page: 0,
				categories: [],
				categoryIndex: -1,
				columns: 6,
				tabIndex: 2,
				nameKey: '',
				user: [],
				is_show_user: true,
			}
		},
		created() {
			this.findCategories();
			this.findPicture();
			this.findUser();
		},
		watch: {
			scrollTop: function(val, oldVal) {
				console.log('new: %s, old: %s', val, oldVal)
				if (val >= 750) {
					this.is_show_user = false;
				} else if (val < 750) {
					this.is_show_user = true;
				}
			},
		},
		onReachBottom() {
			console.log(2)
		},
		methods: {
			sticky(e) {
				console.log('出发吸顶', e)
			},
			findUser() {
				this.$util.request('/api/v1/user?page=0&type=2', {}, (res) => {
					console.log(res)
					this.user = res.data;
				}, true);
			},
			setCategory(item) {
				this.categoryIndex = item.id
			},
			findCategories() {
				this.$util.request('/api/v1/category/all', {}, (res) => {
					console.log(res)
					this.categories = res.data;
					this.categories.unshift({
						id: -1,
						name: '全部'
					})
				}, true);
			},
			clickItem(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/info/info?id=' + e.id
				})
			},
			clickOption(index) {
				this.tabIndex = index;
				this.page = 0;
				this.promos = [];
				this.findPicture();
			},
			search(res) {
				this.nameKey = res.value
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			findPicture() {
				let that = this;
				var label = '';
				var name = '';
				if (this.nameKey) {
					name = this.nameKey;
				}
				console.log('下拉')
				// if (this.indexGroup > 0) {
				// 	label = this.categoryList[this.indexGroup].id
				// }
				this.$util.request('/api/v1/pictureCollection', {
					page: that.page,
					orderType: that.tabIndex,
					label: label,
					type: 1,
					name: name,
					queryType: 2
				}, (
					res) => {
					if (res.data.length == 0) {
						return
					}
					for (var i = 0; i < res.data.length; i++) {
						this.promos.push(res.data[i]);
					}
					this.page++;
				}, true);
			}
		}
	}
</script>

<style lang="scss">
	.active {
		color: #fff;
		background: linear-gradient(270deg, #0033FF 0%, rgba(0, 51, 255, 0.9786) 0%, rgba(110, 24, 255, 0.9899) 43%, #D000FF 83%) !important;

		opacity: 1;
	}

	.fl {
		margin-left: 10px;
		padding: 3px 15px 3px 15px;
		background: #E4E4E4;
		border-radius: 25px 25px 25px 25px;
		opacity: 1;
	}

	.containers {
		width: $page-width;
		margin: 0 auto;
		position: relative;
	}

	.container {
		width: $page-width;
		margin: 0px auto 0;
		display: flex;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-top: 1px solid #C4BFBF;
		background-color: #fff;

		.channel-wrap {
			width: 234px;
			height: 170px;
			background-color: #5f5750;
			display: flex;
			flex-wrap: wrap;

			.channel {
				@extend %flex-align-center;
				flex-direction: column;
				justify-content: center;
				width: 78px;
				height: 82px;
				position: relative;
				cursor: pointer;
				opacity: .7;
				transition: opacity .2s;

				&:hover {
					opacity: 1;
				}

				.thumb {
					width: 24px;
					height: 24px;
					margin-bottom: 4px;
				}

				.name {
					font-size: 12px;
					color: #fff;
				}

				&::before {
					@extend %border;
					top: 0;
					left: 6px;
					right: 6px;
					border-top: 1px solid #665e57;
				}

				&::after {
					@extend %border;
					top: 6px;
					bottom: 6px;
					right: 0;
					border-right: 1px solid #665e57;
				}
			}

			%border {
				position: absolute;
				content: '';
			}
		}

		.promo-wrap {
			margin-left: auto;
			display: flex;

			.promo {
				width: 316px;
				height: 170px;
				margin-right: 15px;
				transition: box-shadow .2s;

				&:last-child {
					margin-right: 0;
				}

				&:hover {
					box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
				}

				.cover {
					width: 316px;
					height: 170px;
				}
			}
		}
	}
</style>